<template>
  <span :class="['status-badge', statusClass]">
    {{ statusText }}
  </span>
</template>

<script setup>
import { computed } from 'vue';
import { getStatusText as getStatusTextUtil, getStatusClass as getStatusClassUtil } from '../utils';

const props = defineProps({
  status: {
    type: String,
    required: true
  }
});

const statusText = computed(() => getStatusTextUtil(props.status));
// Modified to return specific color classes
const statusClass = computed(() => {
  switch (props.status) {
    case 'pending': return 'status-pending';
    case 'graded': return 'status-graded';
    case 'reviewed': return 'status-reviewed';
    default: return 'status-unknown';
  }
});
</script>
<style scoped>
.status-badge {
  padding: 0.25em 0.6em;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.2rem; /* var(--border-radius) */
  color: #fff;
}

.status-pending {
  background-color: #ffc107; /* var(--warning-color) */
  color: #212529; /* var(--dark-color) for better contrast on yellow */
}

.status-graded {
  background-color: #28a745; /* var(--success-color) */
}

.status-reviewed {
  background-color: #17a2b8; /* var(--info-color) */
}

.status-unknown {
  background-color: #6c757d; /* var(--secondary-color) */
}
</style>
